<template>
	<view class="box">
		<view class="box-one">
			<view class="one">
				<view class="red">*</view>
				<view class="order">预约人</view>
				<view style=" font-size: 28rpx; color: #666666; margin-left: 70rpx;">
					王强
				</view>
			</view>
			<view class="one">
				<view class="red">*</view>
				<view class="order">预约时间</view>
				<view class="">
					<u-datetime-picker @confirm="confirm" :show="show.timeShow" v-model="value1" mode="datetime">
					</u-datetime-picker>
					<view style="margin-left: 40rpx;color: #666666; " @click="show.timeShow = true">{{open}}</view>
				</view>
			</view>
			<view class="one">
				<view class="red">*</view>
				<view class="order">预约方式</view>
				<view style="color: #666666; font-size: 28rpx;margin-left: 40rpx;">
					1300000000
				</view>
			</view>
			<view class="one">
				<view class="red">*</view>
				<view class="order">就餐人数</view>
				<view style=" color: #666666; margin-left: 40rpx;">
					<input style="font-size: 28rpx;" type="text" placeholder="请输入就餐人数">
				</view>
			</view>
			<view class="one">
				<view class="red">*</view>
				<view class="order">就餐地址</view>
				<view  style="color: #666666; font-size: 28rpx;margin-left: 40rpx;" class="button">
					<u-picker @cancel="cancel" @confirm="confirmopen" :show="show.addressShow" :columns="columns">
					</u-picker>
					<view @click="show.addressShow = true">{{opens}}</view>
				</view>
			</view>
		</view>
		<view class="buttontwo">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '王强',
				show: false,
				columns: [
					['中国', '美国', '日本'],
				],
				open: '请选择预约时间',
				// 开关
				show: {
					timeShow: false, // 时间选择器
					addressShow: false, // 地址选择器
				},
				value1: '',
				opens: '请选择就餐地址'
			}
		},
		methods: {
			confirm(e) {
				console.log(e.value);
				this.open = e.value
				this.show.timeShow = false

				function fillZero(str) {
					var realNum;
					if (str < 10) {
						realNum = '0' + str;
					} else {
						realNum = str;
					}
					return realNum;
				}
				let time = new Date(e.value)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let day = time.getDate()
				let hour = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()
				let newTime =
					`${year}-${fillZero(month)}-${fillZero(day)} ${fillZero(hour)}:${fillZero(minute)}:${fillZero(second)}`
				this.value1 = newTime
				this.open = newTime
				console.log(this.value1, '目前观测')
			},
			confirmopen(s) {
				console.log(s.value[0]);
				this.opens = s.value[0]
				this.show.addressShow = false
			},
			cancel(f) {
				this.show.addressShow = false
			}
		}
	}
</script>

<style>
	.box {
		background-color: #F5F5F5;
		height: 100vh;
		width: 100%;
	}

	.box-one {
		background-color: white;
		width: 95%;
		height: 984rpx;
		position: absolute;
		top: 30rpx;
		margin-left: 17rpx;
		border-radius: 5rpx;
	}

	.one {
		height: 60rpx;
		border-bottom: 1rpx solid #f3f3f3;
		margin-top: 40rpx;
		margin-left: 20rpx;
		width: 90%;
	}

	.order {
		font-weight: bold;
		font-size: 28rpx;
		/* margin-top: -10rpx; */
	}
	.one {
		display: flex;
	}
	.red {
		color: red;
		font-weight: bold;
	}
	.button {
		border: none;
	}
	.buttontwo{
		position: absolute;
		top: 1100rpx;
		width: 90%;
		height: 80rpx;
		background-color:#5282F0;
		color: white;
		border-radius: 60rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: bold;
		font-size: 27rpx;
		margin-left: 30rpx;
	}
</style>
